<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>腾讯地图开放API - 轻快小巧,简单易用!</title>
    <link rel="stylesheet" href="https://lbs.qq.com/tool/getpoint/common.css" />
    <script src="https://lbs.qq.com/tool/getpoint/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="https://lbs.qq.com/tool/getpoint/jquery-ui.min.css" />
    <script src="https://lbs.qq.com/tool/getpoint/jquery-ui-1.10.4.min.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=ZWEBZ-R7N3U-BJSVH-4TCR3-66MDQ-S3FDJ"></script>
    <style type="text/css">
    
      #container {
        width: 100%;
      }
      [title="到腾讯地图查看此区域"] {
     display: none !important;
    }
    #container div div div span {
      display: none !important;
    } 
    #smimap0{
      display: none;
    }
    *{
    margin:0px ;
    padding:0px;
}
    </style>
  </head>

  <body >
        <div id="container"></div>
    </div>

    <script type="text/javascript">
      var container = document.getElementById('container')
      var map;
      (function(){
        map = new qq.maps.Map(container, {
          disableDefaultUI:true,
          center:new qq.maps.LatLng(28.227121,112.884468),
          zoom:10
            //中心点设计
          // mapZoomType: qq.maps.MapZoomType.CENTER
        })
        }())
     
        markerArray = [],
        curCity = document.getElementById('cur_city')
        map.setOptions({
        draggableCursor: 'crosshair'
      })
      
       
      qq.maps.event.addListener(map, 'mousemove', function(e) {
        var latlng = e.latLng
        // label.setPosition(latlng)
        // label.setContent(latlng.getLat().toFixed(6) + ',' + latlng.getLng().toFixed(6))
      })
      var marker;
      var label;
      var markerArr;
       // 页面初始化加载地图marker
      function initMarker(a,b){
        //判断是否有marker
        if(!marker){
        marker=new qq.maps.Marker({
        position:new qq.maps.LatLng(a,b),
        map:map
      })
      }else{
          marker.setPosition(new qq.maps.LatLng(a,b)); 
      }
       
      //初始化地图
      // map.panTo(new qq.maps.LatLng(a,b));
      latLngFun({lat:a,lng:b})
      }
     
      var infoWin;
      //标记
      function initFowin(a,b){
        infoWin = new qq.maps.InfoWindow({
        map: map
      });
      infoWin.open();
      infoWin.setContent(`测试数据`)
      infoWin.setPosition(new qq.maps.LatLng(a,b))
      
      }
      var markerResult;
     
       // 通过坐标查地址信息
       var urlLng;
      function latLngFun(val){
        urlLng=encodeURI(`https://apis.map.qq.com/ws/geocoder/v1/?location=${val.lat},${val.lng}&key=ZWEBZ-R7N3U-BJSVH-4TCR3-66MDQ-S3FDJ&output=jsonp&&callback=?`)
       $.getJSON(urlLng,function(result){
        markerResult=result
        parent.setCoordinate(result.result)
        val.state&&marker.setPosition(new qq.maps.LatLng(val.lat,val.lng))
        map.panTo(new qq.maps.LatLng(val.lat,val.lng));
       })
      }
      //点击地图
      qq.maps.event.addListener(map, 'click', function(e) {
        
        // 设置坐标
        var coordinate = e.latLng.getLat().toFixed(6) + ',' + e.latLng.getLng().toFixed(6)
       
        // 设置marker
        // marker.setPosition(e.latLng); 
        initMarker(e.latLng.getLat(), e.latLng.getLng())
        map.panTo(e.latLng)
        latLngFun({lat:e.latLng.getLat(),lng: e.latLng.getLng(),state:false})
        // initFowin(e.latLng.getLat(), e.latLng.getLng())  
        
      })
      /**向父层传递坐标信息
       * 
        **/
      function setCoordinate(coordinate) {
        if (window.parent != window && window.parent.setCoordinate) {
          window.parent.setCoordinate(coordinate)
        }
      }
      
    //监听地图缩放级别
    function update() {
    let currentZoom = map.getZoom();
    setCoordinate({type:'zoom',value:currentZoom})
    // console.log();
    }
    //添加dom监听事件  一旦zoom的缩放级别放生变化则出发update函数
     qq.maps.event.addDomListener(map, "zoom_changed", update);

     //通过vue的经纬度去地图上搜索位置,从右侧传递过来的值
     function getLang(data){
     /** 
      location     通过经纬度定位
      animation    marker动画
      sevl         地图级别控制
      initHeight   地图高度
      markerImgAni 自定义marker
      changeName   根据地址搜索
      initMapFun   初始化地图中心点，级别
      **/
       let types={
        'location':lngFun,'animation':animationFun,'sevl':sevlFun,
       'initHeight':initHeightFun,'markerImgAni':markerImgAniFun,
       'changeName':changeNameFun,
       'initMap':initMapFun
      }
      data.type&&types[data.type](data)
     }
     function initMapFun(data){
      let val=data.obj.center.split(',')
      //默认定位在中电软件园
      initMarker(val[0]*1,val[1]*1)
      map.setZoom(data.obj.zoom)
     }
     function changeNameFun(data){
     try{
      url4 = encodeURI(`https://apis.map.qq.com/ws/place/v1/suggestion/?keyword=${data.obj}
      &region=${markerResult.result.address_component.province}
      &key=ZWEBZ-R7N3U-BJSVH-4TCR3-66MDQ-S3FDJ&output=jsonp&&callback=?`)
       $.getJSON(url4, function(result) {
        setCoordinate({type:'changAddress',value:result.data})
        })
     }catch(err){
      alert('数据查询异常')
      console.log('地址查询异常:'+err);
     }
     
     }
     function markerImgAniFun(data){
      var anchor = new qq.maps.Point(6, 6),
        size = new qq.maps.Size(24, 24),
        origin = new qq.maps.Point(0, 0),
        icon = new qq.maps.MarkerImage(data.obj, size, origin, anchor);
     }
    function  initHeightFun(data){
      container.style.height=data.obj+'px'
     }
     //通过经纬度定位
     function lngFun(data){
     let lan=data.obj
     let obj=lan.split(',')
     let lats=parseFloat(obj[0])
     let langs=parseFloat(obj[1])
      map.panTo(new qq.maps.LatLng(lats,langs))
      latLngFun({lat:lats,lng:langs,state:true})
     }
     //开启动画
     function animationFun(data){
       marker.setAnimation(data.obj?qq.maps.MarkerAnimation.BOUNCE:qq.maps.MarkerAnimation.DROP)
     }
     //地图级别控制
     function sevlFun(data){
     map.zoomTo(data.obj%17)
     }
    
    </script>
  </body>
</html>
